<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1,
        #div2 {
            width: 100px;
            height: 50px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
</head>

<body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span>
    </div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <script>
        function allowDrop(allowdropevent) {
            allowdropevent.target.style.color = 'blue';
            allowdropevent.preventDefault();
        }

        function drag(dragevent) {
            dragevent.dataTransfer.setData("text", dragevent.target.id);
            dragevent.target.style.color = 'green';
        }

        function drop(dropevent) {
            dropevent.preventDefault();
            var data = dropevent.dataTransfer.getData("text");
            dropevent.target.appendChild(document.getElementById(data));
            document.getElementById("drag").style.color = 'black';
        }
    </script>
</body>

</html>